<template>
  <div class="">
    <tops
      ><span class="zuo" @click.stop="tui">返回</span
      ><slot>我的页面</slot></tops
    >
    <van-collapse v-model="activeNames">
      <van-collapse-item title="正在看" name="1">
        <ul>
          <li
            v-for="item in $store.state.lists"
            :key="item.id"
            v-show="item.state == 0"
            class="list_zuo"
          >
            <p>
              {{ item.name }}
              <span class="list_yiu"
                ><b @click="dain(item)">标记已看完</b> |
                <i @click="remove(item)">删除图书</i></span
              >
            </p>
          </li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="已完结" name="2">
        <ul>
          <li
            v-for="item in $store.state.lists"
            :key="item.id"
            v-show="item.state == 1"
            class="list_zuo"
          >
            <p>
              {{ item.name }}
              <span class="list_yiu"
                ><b @click="dains(item)">再看一遍</b> |
                <i @click="remove(item)">删除图书</i></span
              >
            </p>
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import tops from "../components/top";
export default {
  data() {
    return {
      activeNames: ["1"],
    };
  },
  mounted() {},
  methods: {
    tui() {
      this.$router.go(-1);
    },
    dain(i) {
      this.$store.commit("dian", i);
    },
    dains(i) {
      this.$store.commit("dians", i);
    },
    remove(i) {
      this.$store.commit("remove", i);
    },
  },
  components: {
    tops,
  },
};
</script>

<style lang='scss' scoped>
.zuo {
  padding-right: 50px;
}
.list_zuo {
  text-align: left;
  .list_yiu {
    float: right;
    b {
      color: red;
    }
  }
}
</style>
